let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack');
let MyPlugin = require('../plugins/myPlugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './reactSrc/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve('dist')
    },
    devtool: 'source-map',
    devServer: {
        contentBase: 'dist',
        // 启用热更新
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: [
                            // 用来实现路由懒加载
                            '@babel/plugin-syntax-dynamic-import'
                        ]
                    }
                }
            }
        ]
    },
    plugins: [
        // 要在 html 中引入 react_dll
        new webpack.DllReferencePlugin({
            manifest: path.resolve(__dirname, 'dist', 'react_manifest.json')
        }),
        // 使用热替换插件
        new webpack.HotModuleReplacementPlugin(),
        // 每次更新的时候 通知是哪个文件更新了
        new webpack.NamedModulesPlugin(),

        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html' 
        }),

        new MyPlugin({
            filename: 'list.md'
        })
    ]
}